<template>
  <!-- 店铺街 -->
  <view>
    <view class='indexList tui-skeleton' :style="[boxStyle]" v-if="merList.length>0">
      <view class='title acea-row row-between-wrapper'>
        <view class='text line1 tui-skeleton-rect acea-row'>
          <image :src="logoUrl"></image>
          <text class='label' :style="[titleColor]">{{ dataConfig.titleConfig.val }}</text>
        </view>
        <view class='more tui-skeleton-rect' :style="[moreColor]" hover-class="none" @click="more()">
          更多
          <text class="iconfont icon-jiantou"></text>
        </view>
      </view>
      <view class='tips mb20'>Good brand store</view>
      <view class='merList' :style="[gridGap]" v-if="listStyle == 0">
        <view class='item' v-for="(item,index) in merList" :key='index'>
          <navigator :url="`/pages/merchant/home/index?merId=${item.id}`" hover-class="none">
            <view class='pic tui-skeleton-rect'>
              <easy-loadimage :image-src="item.coverImage"
                              :radius="dataConfig.contentStyle.val"></easy-loadimage>
            </view>
            <image class="lines left" :src="urlDomain+'crmebimage/presets/lianjie.png'"></image>
            <view v-show="logoShow" class='logo tui-skeleton-rect'>
              <image :src='item.rectangleLogo'></image>
            </view>
            <image class="lines right" :src="urlDomain+'crmebimage/presets/lianjie.png'"></image>
            <view class='merName tui-skeleton-rect'>
              <view class='neme line1 line-heightOne' v-show="nameShow" :style="[nameColor]">{{ item.name }}</view>
              <view v-show="typeShow">
                <text class='label'
                      :style="[labelColor]">{{ item.typeId | merchantTypeFilter }}
                </text>
              </view>
            </view>
          </navigator>
        </view>
      </view>
      <view v-if="listStyle == 1">
        <mer-card :merchantList="merList" :merchantStyle="merchantStyle" :isShowHome="isShowHome" :isStreet="true"
                  :isHome="true"></mer-card>
      </view>
    </view>
  </view>
</template>

<script>
import {
  getDiyMerListApi,
  getMerListbyidsApi
} from '@/api/merchant.js';
import merCard from '@/components/merchantList/index.vue'
import easyLoadimage from '@/components/base/easy-loadimage.vue';

let app = getApp()
export default {
  name: 'merchantList',
  props: {
    dataConfig: {
      type: Object,
      default: () => {
      }
    },
  },
  data() {
    return {
      urlDomain: this.$Cache.get("imgHost"),
      merList: [],
      isShowHome: {},//首页中展示字段判断
      merchantStyle: null //样式二中的样式集合
    }
  },
  components: {
    merCard,
    easyLoadimage
  },
  computed: {
    //店铺数据类型，0默认，1自定义
    listConfig() {
      return this.dataConfig.listConfig.tabVal
    },
    //店铺数据自定义，选中商户的id集合
    activeValueMer() {
      return this.dataConfig.activeValueMer.activeValue
    },
    //样式类型，0，1
    listStyle() {
      return this.dataConfig.tabConfig.tabVal
    },
    //最外层盒子的样式
    boxStyle() {
      return {
        borderRadius: this.dataConfig.bgStyle.val * 2 + 'rpx',
        background: `linear-gradient(${this.dataConfig.bgColor.color[0].item}, ${this.dataConfig.bgColor.color[1].item})`,
        margin: this.dataConfig.mbConfig.val * 2 + 'rpx' + ' ' + '20rpx' + ' ' + 0,
        padding: this.dataConfig.upConfig.val * 2 + 'rpx' + ' ' + '10px' + ' ' + this.dataConfig.downConfig
            .val * 2 + 'rpx'
      }
    },
    //图片样式
    contentStyle() {
      return {
        'border-radius': this.dataConfig.contentStyle.val + 'px',
      }
    },
    //内容间距
    gridGap() {
      return {
        'grid-gap': this.dataConfig.contentConfig.val + 'px'
      }
    },
    //标题颜色
    titleColor() {
      return {
        'color': this.dataConfig.titleColor.color[0].item
      }
    },
    //名称颜色
    nameColor() {
      return {
        'color': this.dataConfig.nameColor.color[0].item
      }
    },
    //更多颜色
    moreColor() {
      return {
        'color': this.dataConfig.moreColor.color[0].item
      }
    },
    // 价格颜色
    priceColor() {
      return {
        'color': this.dataConfig.priceColor.color[0].item
      }
    },
    //标题图片
    logoUrl() {
      return this.dataConfig.logoConfig.url
    },
    //标签
    labelColor() {
      return {
        'backgroundColor': this.dataConfig.labelColor.color[0].item,
        'color': this.dataConfig.labelFontColor.color[0].item
      }
    },
    //店铺名称
    nameShow() {
      if (this.dataConfig.typeConfig.activeValue.indexOf(0) !== -1) {
        return true;
      } else {
        return false;
      }
    },
    //店铺logo
    logoShow() {
      if (this.dataConfig.typeConfig.activeValue.indexOf(1) !== -1) {
        return true;
      } else {
        return false;
      }
    },
    //店铺类型
    typeShow() {
      if (this.dataConfig.typeConfig.activeValue.indexOf(2) !== -1) {
        return true;
      } else {
        return false;
      }
    },
    //店铺数量
    numConfig() {
      return this.dataConfig.numConfig.val
    }
  },
  mounted() {
    this.merchantStyle = {
      contentStyle: this.contentStyle,
      nameColor: this.nameColor,
      labelColor: this.labelColor,
      priceColor: this.priceColor
    }
    this.$store.dispatch('MerCategoryList');
    this.$store.dispatch('MerTypeList');
    if (this.listConfig === 0) {
      this.getMerList();
    } else {
      this.getMerListbyids();
    }
    this.isShowHome = {
      typeShow: this.typeShow,
      nameShow: this.nameShow,
      logoShow: this.logoShow
    }
  },
  methods: {
    more() {
      this.$util.navigateTo(this.dataConfig.linkConfig.val)
    },
    //默认店铺数据
    getMerList() {
      getDiyMerListApi(this.numConfig).then((res) => {
        this.merList = res.data.list;
      });
    },
    //自定义店铺数据
    getMerListbyids() {
      getMerListbyidsApi(this.activeValueMer.join(',')).then((res) => {
        this.merList = res.data;
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.indexList {
}

.merList {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  width: 100%;

  .item {
    position: relative;

    .lines {
      width: 8rpx;
      height: 34rpx;
      position: absolute;
      z-index: 1;
    }

    .left {
      left: 14rpx;
      top: 204rpx;
    }

    .right {
      right: 14rpx;
      top: 204rpx;
    }

    .pic {
      width: 100%;
      height: 220rpx;
      overflow: hidden;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .logo {
      width: 150rpx;
      height: 44rpx;
      background: #FFFFFF;
      box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.1000);
      border-radius: 33rpx;
      opacity: 1;
      margin: auto;
      position: absolute;
      z-index: 1;
      left: 16%;
      top: 59%;

      image {
        margin: auto;
        width: 130rpx;
        height: 44rpx;
        display: block;
      }
    }

    .merName {
      width: 100%;
      height: 110rpx;
      background: #FFFFFF;
      border-radius: 14rpx;
      opacity: 1;
      padding: 30rpx 0 14rpx 0;
      display: flex;
      flex-direction: column;
      align-items: center;

      .neme {
        font-weight: bold;
        color: #333333;
        font-size: 22rpx;
        text-align: center;
        margin-bottom: 4rpx;
        width: 210rpx;
      }

      .label {
        height: 28rpx;
        line-height: 28rpx;
        border-radius: 14rpx;
        opacity: 1;
        text-align: center;
        font-size: 18rpx;
        padding: 0 12rpx;
      }
    }
  }
}
</style>